// pages/degreeScale/degreeScale.js
const app = getApp();
const moment = require('../../lib/moment/moment.js');
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**查看算法错误的方法 */
    canvasIdErrorCallback: function (e) {
        console.error(e.detail.errMsg)
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        //canvas调用id绘画clock函数
        const contextScale = wx.createCanvasContext('scale');

        //绘画最外面的环（无动画）
        contextScale.beginPath();
        contextScale.arc(150, 260, 120, 30 / 180 * Math.PI, 150 / 180 * Math.PI, true);
        contextScale.setStrokeStyle('#8dc9f8');
        contextScale.setLineWidth(3);
        contextScale.stroke();
        contextScale.closePath();

        //绘制内环
        contextScale.beginPath();
        contextScale.arc(150, 260, 95, 30 / 180 * Math.PI, 150 / 180 * Math.PI, true);
        contextScale.setStrokeStyle('#5db3f5');
        contextScale.setLineWidth(9);
        contextScale.stroke();
        contextScale.closePath();
        contextScale.translate(150, 260);

        //绘制刻度线
        var total = [350, 1000, 1500, 2000, 3500, 4000, 4500, 5000, 5500, 6000, 7500];
        for (var i = 0; i < 17; i++) {
            if (i % 6 === 3) {
                contextScale.beginPath();
                contextScale.setLineWidth(2);
                contextScale.setStrokeStyle('#ffffff');
                contextScale.moveTo(92 * Math.sin(7.5 * i / 180 * Math.PI), -92 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.lineTo(97 * Math.sin(7.5 * i / 180 * Math.PI), -97 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.moveTo(-92 * Math.sin(7.5 * i / 180 * Math.PI), -92 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.lineTo(-97 * Math.sin(7.5 * i / 180 * Math.PI), -97 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.stroke();
                contextScale.closePath();
            }else{
                contextScale.beginPath();
                contextScale.setLineWidth(1);
                contextScale.setStrokeStyle('#ffffff');
                contextScale.moveTo(93 * Math.sin(7.5 * i / 180 * Math.PI), -93 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.lineTo(97 * Math.sin(7.5 * i / 180 * Math.PI), -97 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.moveTo(-93 * Math.sin(7.5 * i / 180 * Math.PI), -93 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.lineTo(-97 * Math.sin(7.5 * i / 180 * Math.PI), -97 * Math.cos(7.5 * i / 180 * Math.PI));
                contextScale.stroke();
                contextScale.closePath();
            }
        }
        /*绘制文本*/
        contextScale.setFontSize(8);
        contextScale.setFillStyle('#8dc9f8');
        contextScale.setTextAlign('center');
        contextScale.setTextBaseline('bottom');
        contextScale.rotate((-7.5 * 15) / 180 * Math.PI);
        for (var i = 0; i < 11; i++) {
            if (i % 2) {
                contextScale.setFillStyle('#8dc9f8');
            } else {
                contextScale.setFillStyle('#cce8fc');
            }

            contextScale.fillText(total[i], 0, -72);
            contextScale.rotate((7.5 * 3) / 180 * Math.PI);
        }
        contextScale.rotate(-7.5 * 18 / 180 * Math.PI);
        contextScale.setFillStyle('#8dc9f8');
        contextScale.setFontSize(18);
        contextScale.fillText('可借', 0, -30);
        contextScale.setFontSize(11);

        /*获取当前评估的日期时间。*/
        var date = new Date();
        var ShowDate = moment(date).format('YYYY/MM/DD');
        contextScale.fillText(ShowDate, 0, 50);

        /*因为需要涉及到动画，所以现在绘画一个pointer重置幕布*/
        var contextPointer = wx.createCanvasContext('pointer');


        /*刻度要动的函数*/
        function move(num) {
            var timer;
            var i = 0;
            contextPointer.translate(275, 330);
            contextPointer.setFillStyle('#ffffff');
            contextPointer.setStrokeStyle('#ffffff');
            //获取最终要达到的点的值
            var finnal = num;
            var value = 0;
            if (finnal < 550) {
                value = (finnal - 316.7) * 0.225;
            } else if (finnal < 700) {
                value = (finnal - 550) * 0.9 + 52.5;
            } else {
                value = finnal > 1000 ? 1000 : finnal;
                value = (value - 700) * 0.18 + 187.5;
            }
            contextPointer.setFontSize(45);
            contextPointer.setTextAlign('center');
            // contextPointer.shadowColor = '#ffffff';

            /*绘制动画事件*/
            function slideValue() {
                contextPointer.translate(90, 120);
                contextPointer.clearRect(0, 0, '700rpx', '650rpx');
                contextPointer.translate(90, 120);
                i++;

                //绘制滚动元素
                contextPointer.beginPath();
                contextPointer.arc(45 * Math.sin((i + 60) / 180 * Math.PI), 90 * Math.cos((i + 60) / 180 * Math.PI), 5, 0, 2 * Math.PI, true);
                contextPointer.setFillStyle('#8dc9f8');
                contextPointer.fill();
                contextPointer.arc(45 * Math.sin((i + 60) / 180 * Math.PI), 90 * Math.cos((i + 60) / 180 * Math.PI), 3, 0, 2 * Math.PI, true);
                contextPointer.setFillStyle('#ffffff');
                contextPointer.fill();

                /*填充分数和评分*/
                contextPointer.setFontSize(40);
                var text = 0;
                if (i < 52.5) {
                    text = i / 0.225 + 116.7;
                } else if (i < 187.5) {
                    text = (i - 52.5) / 0.9 + 320;
                } else {
                    text = (i - 187.5) / 0.18 + 350;
                    text = text > 1000 ? 1000 : text;
                }
                text = text > num ? num : text;


                contextPointer.fillText(parseInt(text), -120, -160);
                contextPointer.draw();
                contextPointer.stroke();
                contextPointer.setFontSize(35);
                contextPointer.stroke();
                contextPointer.closePath();

                // 如果到达所需要的弧度，则停止，否则继续跳动
                if (i > value) {
                    setTimeout(function () {
                        contextPointer.fillText('信用', 0, 0);
                    }, 200);
                    clearTimeout(timer);
                } else {
                    timer = setTimeout(slideValue, text / num * 15);
                }

            }
            slideValue();
        };


        move(7500);

        //实例化画出两个对象
        contextScale.draw();
        contextPointer.draw();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})